<template>
    <div class="changeEmail">
        <div class='moduleHead'>
            <router-link :to="{name:'setting'}">
                <span class="back"></span>
            </router-link>
            <span>{{language.changeEmail_title}}</span>
            <span @click='submitData' class="right"> {{language.unify_done }}</span>
        </div>
        <div class="body">
            <div class="text_box">
                <p>{{language.changeEmail_yourCurrentEmail}}</p>
                <p><span>{{userInfo.account.email}}</span></p>
            </div>
            <div class="input_box">
                <div class="line_input">
                    <input v-model="oldEmail" v-validate="'required|email'" name="oldEmail" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" v-bind:placeholder="language.changeEmail_oldEmail">
                    <i @click="clearValue('oldEmail')" v-show="oldEmail"></i>
                </div>
                <div class="line_input">
                    <input v-model="newEmail" v-validate="'required|email'" name="newEmail" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" v-bind:placeholder="language.changeEmail_newEmail">
                    <i @click="clearValue('newEmail')" v-show="newEmail"></i>
                </div>
                <div class="line_input">
                    <input v-model="confirmEmail" v-validate="'required|email'" name="confirmEmail" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" :placeholder="language.changeEmail_confirmEmail">
                    <i @click="clearValue('confirmEmail')" v-show="confirmEmail"></i>
                </div>
            </div>
            <div class="forgot_box">
                <router-link :to="{name: 'feedback'}" class="main_color">
                    {{language.changeEmail_forgotOldEmail}}
                </router-link>
            </div>
        </div>
        <publicDialog :props="this.dialogData"></publicDialog>
        <loading :props="{show:loadingAjax,type:'page'}"></loading>
    </div>
</template>
<script>
import * as API from '../api';
import validationMixin from '../plugins/my-validate'
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'changeEmail',

    mixins: [validationMixin],

    components: {
        publicDialog,
        loading,
    },

    data: function() {
        return {
            oldEmail: '',
            newEmail: '',
            confirmEmail: '',
            loadingAjax: false,
            dialogData: {}
        }
    },

    created() {
        this.defaultData = _.clone(this.$data);
    },

    activated: function() {
        this.dialogData = {};
    },

    computed: {
        userInfo() {
            return this.$store.state.user.userInfo;
        }
    },

    methods: {

        clearValue(key) {
            this[key] = '';
        },

        curCheckAll() {
            return this.newEmail == this.confirmEmail && this.checkAll();
        },

        showTopTip(type, msg) {
            this.dialogData = {
                position: 'top',
                type: type,
                content: {
                    info: msg,
                }
            };
        },

        submitData() {
            var tthis = this;
            if (this.curCheckAll() && !this.loadingAjax) {
                this.loadingAjax = true;
                API.change_email({
                    data: {
                        old_email: this.oldEmail,
                        new_email: this.newEmail,
                        email_repeat: this.confirmEmail
                    },
                    success: function(data) {
                        if (typeof(data.errcode) == 'undefined') {
                            Object.assign(tthis.$data, tthis.defaultData);
                            let userData = Unit.getObjSessionStorage("ms_myself") || {};
                            userData.account.email = data.new_email;
                            tthis.$store.dispatch('user_cacheUserInfo', userData);
                            tthis.showTopTip('successful', tthis.language.changeEmail_changeOk);
                        } else {
                            tthis.showTopTip('error', data.errmsg);
                        }
                    },
                    complete: function() {
                        tthis.loadingAjax = false;
                    }
                })
            } else {
                if (this.dialogData.position) {
                    return false
                } else if (tthis.hasValidateError('oldEmail')) {
                    tthis.showTopTip('error', tthis.language.changeEmail_oldEmail + ': ' + tthis.getValidateError('oldEmail'));
                    return false;
                } else if (tthis.hasValidateError('newEmail')) {
                    tthis.showTopTip('error', tthis.language.changeEmail_newEmail + ': ' + tthis.getValidateError('newEmail'));
                    return false;
                } else if (tthis.hasValidateError('confirmEmail')) {
                    tthis.showTopTip('error', tthis.language.changeEmail_confirmEmail + ': ' + tthis.getValidateError('confirmEmail'));
                    return false;
                } else if (this.confirmEmail != this.newEmail) {
                    tthis.showTopTip('error', tthis.language.changeEmail_ErrTipA);
                    return false;
                }
            }
        },
    }
}

</script>
<style scoped>
.changeEmail {
    padding-top: 44px;
    font-size: 14px;
    background-color: #f7f7f7;
}

.changeEmail .moduleHead .right {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    width: 50px;
    opacity: 1;
}

.changeEmail .text_box {
    padding: 22px 20px;
    color: #666;
}

.changeEmail .text_box span {
    color: #333;
}

.changeEmail .input_box {
    padding: 0 20px;
    border: 1px solid #e8e9ec;
    border-left: 0;
    border-right: 0;
    background: #fff;
}

.changeEmail .input_box .line_input {
    position: relative;
}

.changeEmail .input_box .line_input input {
    padding: 8px 0;
    background: none;
    width: 100%;
    border-bottom: 1px solid #e8e9ec;
    line-height: 28px;
    font-size: 16px;
    border-radius: 0;
}

.changeEmail .input_box .line_input i {
    position: absolute;
    top: 7px;
    right: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(../assets/icoClose.png) center no-repeat;
    background-size: 18px auto;
}

.changeEmail .input_box .line_input:last-child input {
    border-bottom: 0;
}

.changeEmail .forgot_box {
    padding: 0 20px;
    line-height: 40px;
}

</style>
